// 全局字体优化样式 - 确保字体清晰可见且美观

// 导入优质字体
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

// 全局字体设置
* {
  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

// 全局字体颜色和对比度优化
body, html {
  color: #ffffff !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em !important;
}

// 强化所有文本元素的可见性
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

p, span, div, label, a {
  color: #ffffff !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

// 表格字体优化
.el-table {
  font-family: 'Inter', 'Roboto', sans-serif !important;
  
  th {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  }
  
  td {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
    
    // 特别优化状态列的字体
    &.status-column {
      font-weight: 500 !important;
      color: #a5def1 !important;
      text-shadow: 0 0 3px rgba(165, 222, 241, 0.3) !important;
    }
  }
  
  // 优化表格中的链接和按钮文字
  .el-button {
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-shadow: none !important;
    
    &--text {
      color: #a5def1 !important;
      font-weight: 500 !important;
      
      &:hover {
        color: #c0edfc !important;
        text-shadow: 0 0 5px rgba(192, 237, 252, 0.3) !important;
      }
    }
  }
}

// 表单字体优化
.el-form {
  .el-form-item__label {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }
  
  .el-input__inner {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    
    &::placeholder {
      color: rgba(255, 255, 255, 0.7) !important;
      font-weight: 300 !important;
      letter-spacing: 0.01em !important;
    }
  }
  
  .el-textarea__inner {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.01em !important;
    
    &::placeholder {
      color: rgba(255, 255, 255, 0.7) !important;
      font-weight: 300 !important;
    }
  }
}

// 按钮字体优化
.el-button {
  font-family: 'Inter', 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  
  &--primary {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }
  
  &--default {
    color: #a5def1 !important;
    font-weight: 500 !important;
    
    &:hover {
      color: #ffffff !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
  }
}

// 菜单字体优化
.el-menu {
  .el-menu-item {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    
    &:hover {
      color: #a5def1 !important;
      text-shadow: 0 0 5px rgba(165, 222, 241, 0.3) !important;
    }
    
    &.is-active {
      color: #c0edfc !important;
      font-weight: 600 !important;
      text-shadow: 0 0 8px rgba(192, 237, 252, 0.4) !important;
    }
    
    i {
      color: inherit !important;
    }
  }
  
  .el-submenu__title {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    
    &:hover {
      color: #a5def1 !important;
      text-shadow: 0 0 5px rgba(165, 222, 241, 0.3) !important;
    }
    
    i {
      color: inherit !important;
    }
  }
}

// 分页器字体优化
.el-pagination {
  font-family: 'Inter', 'Roboto', sans-serif !important;
  
  .el-pager li {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
    
    &:hover {
      color: #a5def1 !important;
      text-shadow: 0 0 3px rgba(165, 222, 241, 0.3) !important;
    }
    
    &.active {
      color: #ffffff !important;
      font-weight: 600 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }
  }
  
  .btn-prev, .btn-next {
    color: #ffffff !important;
    font-weight: 500 !important;
    
    &:hover {
      color: #a5def1 !important;
      text-shadow: 0 0 3px rgba(165, 222, 241, 0.3) !important;
    }
  }
  
  .el-pagination__total,
  .el-pagination__jump {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
  }
}

// 对话框字体优化
.el-dialog {
  .el-dialog__title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }
  
  .el-dialog__body {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.01em !important;
  }
}

// 消息提示字体优化
.el-message {
  font-family: 'Inter', 'Roboto', sans-serif !important;
  
  .el-message__content {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }
}

// 通知字体优化
.el-notification {
  .el-notification__title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }
  
  .el-notification__content {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.01em !important;
  }
}

// 标签页字体优化
.el-tabs {
  .el-tabs__item {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
    
    &:hover {
      color: #a5def1 !important;
      text-shadow: 0 0 3px rgba(165, 222, 241, 0.3) !important;
    }
    
    &.is-active {
      color: #c0edfc !important;
      font-weight: 600 !important;
      text-shadow: 0 0 5px rgba(192, 237, 252, 0.4) !important;
    }
  }
}

// 面包屑字体优化
.el-breadcrumb {
  .el-breadcrumb__inner {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
    
    &:hover {
      color: #a5def1 !important;
      text-shadow: 0 0 3px rgba(165, 222, 241, 0.3) !important;
    }
  }
  
  &:last-child .el-breadcrumb__inner {
    color: #c0edfc !important;
    font-weight: 500 !important;
  }
  
  .el-breadcrumb__separator {
    color: rgba(255, 255, 255, 0.6) !important;
  }
}

// 树形控件字体优化
.el-tree {
  .el-tree-node__content {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
    
    &:hover {
      color: #a5def1 !important;
      text-shadow: 0 0 3px rgba(165, 222, 241, 0.3) !important;
    }
  }
  
  .el-tree-node.is-current > .el-tree-node__content {
    color: #c0edfc !important;
    font-weight: 500 !important;
    text-shadow: 0 0 5px rgba(192, 237, 252, 0.4) !important;
  }
}

// 下拉选择框字体优化
.el-select-dropdown {
  .el-select-dropdown__item {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
    
    &:hover {
      color: #a5def1 !important;
      text-shadow: 0 0 3px rgba(165, 222, 241, 0.3) !important;
    }
    
    &.selected {
      color: #c0edfc !important;
      font-weight: 500 !important;
      text-shadow: 0 0 5px rgba(192, 237, 252, 0.4) !important;
    }
  }
}

// 特殊状态文字优化
.status-text {
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  
  &.status-normal {
    color: #67c23a !important;
    text-shadow: 0 0 3px rgba(103, 194, 58, 0.3) !important;
  }
  
  &.status-warning {
    color: #e6a23c !important;
    text-shadow: 0 0 3px rgba(230, 162, 60, 0.3) !important;
  }
  
  &.status-danger {
    color: #f56c6c !important;
    text-shadow: 0 0 3px rgba(245, 108, 108, 0.3) !important;
  }
  
  &.status-info {
    color: #a5def1 !important;
    text-shadow: 0 0 3px rgba(165, 222, 241, 0.3) !important;
  }
}

// 数字和统计数据字体优化
.number-text, .stat-number {
  font-family: 'Inter', 'Roboto', monospace !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: #a5def1 !important;
  text-shadow: 0 0 5px rgba(165, 222, 241, 0.3) !important;
}

// 时间和日期字体优化
.time-text, .date-text {
  font-family: 'Inter', 'Roboto', monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

// 链接字体优化
a {
  color: #a5def1 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  
  &:hover {
    color: #c0edfc !important;
    text-shadow: 0 0 5px rgba(192, 237, 252, 0.4) !important;
    text-decoration: underline !important;
  }
}

// 加载文字优化
.el-loading-text {
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

// 空状态文字优化
.el-table__empty-text {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

// 响应式字体大小
@media (max-width: 768px) {
  * {
    font-size: 13px !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-size: 16px !important;
  }
  
  .el-table th,
  .el-table td {
    font-size: 13px !important;
  }
}

@media (min-width: 1200px) {
  * {
    font-size: 14px !important;
  }
  
  .el-table th,
  .el-table td {
    font-size: 14px !important;
  }
}



// 弹框和模态框样式优化
.el-dialog {
  background-color: #2c3d55 !important;
  border: 1px solid #5f6e8a !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  
  .el-dialog__header {
    background-color: #2a3950 !important;
    border-bottom: 1px solid #5f6e8a !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 20px 24px !important;
    
    .el-dialog__title {
      color: #ffffff !important;
      font-weight: 600 !important;
      font-size: 18px !important;
      letter-spacing: 0.02em !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    .el-dialog__headerbtn {
      .el-dialog__close {
        color: #88a7b1 !important;
        font-size: 20px !important;
        
        &:hover {
          color: #a5def1 !important;
          background-color: rgba(165, 222, 241, 0.1) !important;
          border-radius: 4px !important;
        }
      }
    }
  }
  
  .el-dialog__body {
    background-color: #2c3d55 !important;
    color: #ffffff !important;
    padding: 24px !important;
    
    // 表单标签优化
    .el-form-item__label {
      color: #ffffff !important;
      font-weight: 500 !important;
      font-size: 14px !important;
      letter-spacing: 0.02em !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
      
      &::before {
        color: #f56c6c !important;
      }
    }
    
    // 输入框优化
    .el-input__inner {
      background-color: #364966 !important;
      border: 1px solid #5f6e8a !important;
      color: #ffffff !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      letter-spacing: 0.01em !important;
      border-radius: 6px !important;
      
      &:focus {
        border-color: #3a7b99 !important;
        box-shadow: 0 0 0 2px rgba(58, 123, 153, 0.2) !important;
      }
      
      &::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
        font-weight: 300 !important;
        letter-spacing: 0.01em !important;
      }
    }
    
    // 选择框优化
    .el-select {
      .el-input__inner {
        background-color: #364966 !important;
        border: 1px solid #5f6e8a !important;
        color: #ffffff !important;
        
        &:focus {
          border-color: #3a7b99 !important;
        }
      }
      
      .el-input__suffix {
        .el-select__caret {
          color: #88a7b1 !important;
        }
      }
    }
    
    // 日期选择器优化
    .el-date-editor {
      .el-input__inner {
        background-color: #364966 !important;
        border: 1px solid #5f6e8a !important;
        color: #ffffff !important;
        
        &:focus {
          border-color: #3a7b99 !important;
        }
      }
      
      .el-input__prefix,
      .el-input__suffix {
        .el-input__icon {
          color: #88a7b1 !important;
        }
      }
    }
    
    // 数字输入框优化
    .el-input-number {
      .el-input__inner {
        background-color: #364966 !important;
        border: 1px solid #5f6e8a !important;
        color: #ffffff !important;
        text-align: center !important;
        font-weight: 500 !important;
        
        &:focus {
          border-color: #3a7b99 !important;
        }
      }
      
      .el-input-number__decrease,
      .el-input-number__increase {
        background-color: #2a3950 !important;
        border-color: #5f6e8a !important;
        color: #88a7b1 !important;
        
        &:hover {
          background-color: #222e41 !important;
          color: #a5def1 !important;
        }
      }
    }
    
    // 文本域优化
    .el-textarea {
      .el-textarea__inner {
        background-color: #364966 !important;
        border: 1px solid #5f6e8a !important;
        color: #ffffff !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        
        &:focus {
          border-color: #3a7b99 !important;
          box-shadow: 0 0 0 2px rgba(58, 123, 153, 0.2) !important;
        }
        
        &::placeholder {
          color: rgba(255, 255, 255, 0.6) !important;
        }
      }
    }
    
    // 开关优化
    .el-switch {
      .el-switch__core {
        background-color: #5f6e8a !important;
        border-color: #5f6e8a !important;
        
        &::after {
          background-color: #ffffff !important;
        }
      }
      
      &.is-checked {
        .el-switch__core {
          background-color: #3a7b99 !important;
          border-color: #3a7b99 !important;
        }
      }
    }
    
    // 单选框优化
    .el-radio {
      .el-radio__input {
        .el-radio__inner {
          background-color: #364966 !important;
          border-color: #5f6e8a !important;
          
          &::after {
            background-color: #3a7b99 !important;
          }
        }
        
        &.is-checked {
          .el-radio__inner {
            background-color: #3a7b99 !important;
            border-color: #3a7b99 !important;
          }
        }
      }
      
      .el-radio__label {
        color: #ffffff !important;
        font-weight: 400 !important;
      }
    }
    
    // 复选框优化
    .el-checkbox {
      .el-checkbox__input {
        .el-checkbox__inner {
          background-color: #364966 !important;
          border-color: #5f6e8a !important;
          
          &::after {
            border-color: #ffffff !important;
          }
        }
        
        &.is-checked {
          .el-checkbox__inner {
            background-color: #3a7b99 !important;
            border-color: #3a7b99 !important;
          }
        }
      }
      
      .el-checkbox__label {
        color: #ffffff !important;
        font-weight: 400 !important;
      }
    }
  }
  
  .el-dialog__footer {
    background-color: #2a3950 !important;
    border-top: 1px solid #5f6e8a !important;
    border-radius: 0 0 8px 8px !important;
    padding: 16px 24px !important;
    text-align: right !important;
    
    .el-button {
      margin-left: 12px !important;
      
      &--primary {
        background: linear-gradient(135deg, #3a7b99 0%, #70afce 100%) !important;
        border-color: #3a7b99 !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        padding: 10px 20px !important;
        border-radius: 6px !important;
        
        &:hover {
          background: linear-gradient(135deg, #4189aa 0%, #a5def1 100%) !important;
          border-color: #4189aa !important;
          transform: translateY(-1px) !important;
          box-shadow: 0 4px 12px rgba(58, 123, 153, 0.3) !important;
        }
      }
      
      &--default {
        background-color: transparent !important;
        border: 1px solid #5f6e8a !important;
        color: #88a7b1 !important;
        font-weight: 500 !important;
        padding: 10px 20px !important;
        border-radius: 6px !important;
        
        &:hover {
          background-color: #222e41 !important;
          border-color: #a5def1 !important;
          color: #a5def1 !important;
          transform: translateY(-1px) !important;
        }
      }
    }
  }
}

// 下拉选择框弹出层优化
.el-select-dropdown {
  background-color: #2c3d55 !important;
  border: 1px solid #5f6e8a !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  
  .el-select-dropdown__item {
    background-color: #2c3d55 !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    padding: 10px 16px !important;
    
    &:hover {
      background-color: #222e41 !important;
      color: #a5def1 !important;
    }
    
    &.selected {
      background-color: #3a7b99 !important;
      color: #ffffff !important;
      font-weight: 500 !important;
    }
    
    &.is-disabled {
      color: rgba(255, 255, 255, 0.5) !important;
      background-color: #2c3d55 !important;
    }
  }
}

// 日期选择器弹出层优化
.el-picker-panel {
  background-color: #2c3d55 !important;
  border: 1px solid #5f6e8a !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  
  .el-picker-panel__header {
    background-color: #2a3950 !important;
    border-bottom: 1px solid #5f6e8a !important;
    
    .el-picker-panel__icon-btn {
      color: #88a7b1 !important;
      
      &:hover {
        color: #a5def1 !important;
      }
    }
  }
  
  .el-picker-panel__content {
    background-color: #2c3d55 !important;
    
    .el-date-table {
      th {
        color: #ffffff !important;
        font-weight: 500 !important;
      }
      
      td {
        color: #ffffff !important;
        
        &.available:hover {
          background-color: #222e41 !important;
          color: #a5def1 !important;
        }
        
        &.current {
          background-color: #3a7b99 !important;
          color: #ffffff !important;
        }
        
        &.today {
          color: #70afce !important;
          font-weight: 600 !important;
        }
      }
    }
  }
}

// 消息框优化
.el-message-box {
  background-color: #2c3d55 !important;
  border: 1px solid #5f6e8a !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  
  .el-message-box__header {
    background-color: #2a3950 !important;
    border-bottom: 1px solid #5f6e8a !important;
    border-radius: 8px 8px 0 0 !important;
    
    .el-message-box__title {
      color: #ffffff !important;
      font-weight: 600 !important;
      font-size: 18px !important;
    }
    
    .el-message-box__headerbtn {
      .el-message-box__close {
        color: #88a7b1 !important;
        
        &:hover {
          color: #a5def1 !important;
        }
      }
    }
  }
  
  .el-message-box__content {
    background-color: #2c3d55 !important;
    color: #ffffff !important;
    padding: 24px !important;
    
    .el-message-box__message {
      color: #ffffff !important;
      font-weight: 400 !important;
      line-height: 1.6 !important;
    }
    
    .el-message-box__input {
      .el-input__inner {
        background-color: #364966 !important;
        border: 1px solid #5f6e8a !important;
        color: #ffffff !important;
        
        &:focus {
          border-color: #3a7b99 !important;
        }
      }
    }
  }
  
  .el-message-box__btns {
    background-color: #2a3950 !important;
    border-top: 1px solid #5f6e8a !important;
    border-radius: 0 0 8px 8px !important;
    padding: 16px 24px !important;
    
    .el-button {
      margin-left: 12px !important;
    }
  }
}

// 提示框优化
.el-tooltip__popper {
  background-color: #1c2e47 !important;
  border: 1px solid #5f6e8a !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  
  .popper__arrow {
    border-top-color: #1c2e47 !important;
    border-bottom-color: #1c2e47 !important;
    border-left-color: #1c2e47 !important;
    border-right-color: #1c2e47 !important;
  }
}

// 弹出菜单优化
.el-dropdown-menu {
  background-color: #2c3d55 !important;
  border: 1px solid #5f6e8a !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  
  .el-dropdown-menu__item {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
    
    &:hover {
      background-color: #222e41 !important;
      color: #a5def1 !important;
    }
    
    &.is-disabled {
      color: rgba(255, 255, 255, 0.5) !important;
    }
  }
}

